import React, { Component } from 'react';
import { connect } from "react-redux";
import { Toast } from 'react-weui';
import * as actions from '../../../store/action/my';
import {loadMore} from '../../../utils';
import List from '../../views/list/orderList';
import Header from '../../../components/Header/Header';
import '../../../static/css/common.less';
import './exChangeRecord.less';

class ExChangeRecord extends Component {
    state = {
        type : '0'
    }

    componentDidMount(){
        this.props.my.order.type = this.state.type;
        this.props.fetchOrders();
        loadMore(this.mainContent,this.props.fetchOrders);

        // this.props.getViewList();
        // loadMore(this.mainContent,this.props.getViewList);
    }

    goHome = () =>{
        this.props.history.push('/');
    }


    changeType = (type) =>{
        this.setState({
            type : type
        })
        this.props.my.order.page = 1;
        this.props.my.order.type = type;
        this.props.my.order.orderList = [];
        this.props.fetchOrders();
    }

    render() {
        return (
            <div>
                <div className="detail-region detail-region1">
                    <Header title="订单记录"></Header>
                    <div className="detail-tab">
                        <div className="tab-item" onClick={this.changeType.bind(undefined, '0')}><span className={this.state.type == '0'?'active':''}>全部</span></div>
                        <div className="tab-item" onClick={this.changeType.bind(undefined, '1')}><span className={this.state.type == '1'?'active':''}>已付款</span></div>
                        <div className="tab-item" onClick={this.changeType.bind(undefined, '2')}><span className={this.state.type == '2'?'active':''}>已结算</span></div>
                    </div>
                    <Toast icon="loading" show={this.props.my.fetching}>Loading...</Toast>
                    <section className="content" ref={ref=>this.mainContent=ref}>
                        {this.props.my.order.orderList.length>0?
                             <div className="detail-list">
                                <List listClass='list-col' data={this.props.my.order.orderList}></List>
                            </div>
                        :<div>
                        <div className="no-content">
                            <img src="./src/static/images/no-change.png" alt=""></img>
                        </div>
                        <div className="no-more">暂无订单记录~</div>
                        <div className="see-more" onClick={this.goHome}>去逛逛</div>
                    </div>}
                        <div style={{display:'none'}}>
                            <div className="content-item item-use">
                                <div className="item-left">
                                    <div className="item-money">
                                        <span className="money-ico">￥</span>50
                                    </div>
                                    <div className="item-detail">满135元可用</div>
                                </div>
                                <div className="item-right">
                                    <div className="item-type"><span>淘宝</span></div>
                                    <div className="item-title">全品类(特例商品除外)</div>
                                    <div className="item-use-date">有效期至2018/08/12</div>
                                    <div className="use-now">立即使用</div>
                                    <div className="item-used"></div>
                                </div>
                            </div>
                            <div className="content-item">
                                <div className="item-left">
                                    <div className="item-money">
                                        <span className="money-ico">￥</span>50
                                    </div>
                                    <div className="item-detail">满135元可用</div>
                                </div>
                                <div className="item-right">
                                    <div className="item-type"><span>淘宝</span></div>
                                    <div className="item-title">全品类(特例商品除外)</div>
                                    <div className="item-use-date">有效期至2018/08/12</div>
                                    <div className="use-now">立即使用</div>
                                </div>
                            </div>
                            <div className="content-item">
                                <div className="item-left">
                                    <div className="item-money">
                                        <span className="money-ico">￥</span>50
                                    </div>
                                    <div className="item-detail">满135元可用</div>
                                </div>
                                <div className="item-right">
                                    <div className="item-type"><span>淘宝</span></div>
                                    <div className="item-title">全品类(特例商品除外)</div>
                                    <div className="item-use-date">有效期至2018/08/12</div>
                                    <div className="use-now">立即使用</div>
                                </div>
                            </div>
                            <div className="content-item">
                                <div className="item-left">
                                    <div className="item-money">
                                        <span className="money-ico">￥</span>50
                                    </div>
                                    <div className="item-detail">满135元可用</div>
                                </div>
                                <div className="item-right">
                                    <div className="item-type"><span>淘宝</span></div>
                                    <div className="item-title">全品类(特例商品除外)</div>
                                    <div className="item-use-date">有效期至2018/08/12</div>
                                    <div className="use-now">立即使用</div>
                                </div>
                            </div>
                            <div className="content-item">
                                <div className="item-left">
                                    <div className="item-money">
                                        <span className="money-ico">￥</span>50
                                    </div>
                                    <div className="item-detail">满135元可用</div>
                                </div>
                                <div className="item-right">
                                    <div className="item-type"><span>淘宝</span></div>
                                    <div className="item-title">全品类(特例商品除外)</div>
                                    <div className="item-use-date">有效期至2018/08/12</div>
                                    <div className="use-now">立即使用</div>
                                </div>
                            </div>
                            <div className="content-item">
                                <div className="item-left">
                                    <div className="item-money">
                                        <span className="money-ico">￥</span>50
                                    </div>
                                    <div className="item-detail">满135元可用</div>
                                </div>
                                <div className="item-right">
                                    <div className="item-type"><span>淘宝</span></div>
                                    <div className="item-title">全品类(特例商品除外)</div>
                                    <div className="item-use-date">有效期至2018/08/12</div>
                                    <div className="use-now">立即使用</div>
                                </div>
                            </div>
                            <div className="content-item">
                                <div className="item-left">
                                    <div className="item-money">
                                        <span className="money-ico">￥</span>50
                                    </div>
                                    <div className="item-detail">满135元可用</div>
                                </div>
                                <div className="item-right">
                                    <div className="item-type"><span>淘宝</span></div>
                                    <div className="item-title">全品类(特例商品除外)</div>
                                    <div className="item-use-date">有效期至2018/08/12</div>
                                    <div className="use-now">立即使用</div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        )
    }
}

export default connect((state)=>{return {...state}}, actions)(ExChangeRecord);